<template>
  <div class="search-form-container">
    <el-form
      label-width="120px"
      :inline="true"
      :model="searchForm"
    >
      <el-input
        size="small"
        v-model="searchForm.name"
        class="input"
        clearable
        placeholder="升级包名称"
      ></el-input>
      <el-select
        size="small"
        class="input"
        v-model="searchForm.deviceTypeUuid"
        placeholder="产品类型"
        filterable
        remote
        reserve-keyword
        :remote-method="remoteDeviceTypeSearch"
        :loading="remoteLoading"
        clearable
        @focus="remoteDeviceTypeSearch()"
      >
        <el-option
          class="input"
          v-for="deviceType in deviceTypeList"
          :key="deviceType.uuid"
          :label="deviceType.name"
          :value="deviceType.uuid"
        >
        </el-option>
      </el-select>
      <el-select
        size="small"
        class="input"
        v-model="searchForm.active"
        placeholder="允许升级"
        clearable
      >
        <el-option
          class="input"
          v-for="active in activeOptionList"
          :key="active.value"
          :label="active.label"
          :value="active.value"
        ></el-option>
      </el-select>
      <el-input
        size="small"
        class="input"
        v-model="searchForm.description"
        placeholder="备注"
        clearable
      ></el-input>
      <el-button
        size="small"
        type="primary"
        icon="el-icon-search"
        @click="search"
        :loading="searchForm.btnLoading"
      >查询</el-button>
    </el-form>
  </div>
</template>

<script>
import { queryProductTypeListApi } from '../../../api/productType';

export default {
  model: {
    prop: 'searchForm'
  },
  props: {
    searchForm: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      remoteLoading: false,
      btnLoading: false,
      deviceTypeList: [],
      activeOptionList: [
        {
          label: '允许',
          value: true
        },
        {
          label: '不允许',
          value: false
        }
      ]
    };
  },
  methods: {
    search() {
      this.$emit('search');
    },
    remoteDeviceTypeSearch(name) {
      queryProductTypeListApi(name, 100)
        .then(
          res =>
            (this.deviceTypeList = res.map(deviceType => {
              return {
                uuid: deviceType.uuid,
                name: deviceType.name
              };
            }))
        )
        .catch(error => Message.error(parseError(error)));
    }
  }
};
</script>

<style lang="scss" scoped>
div {
  // .local-name {
  //   // padding: 10px 0 10px 10px;
  //   font-size: 24px;
  //   font-weight: 800;
  //   display: flex;
  //   justify-content: space-between;
  //   border: 1px solid red;
  //   .el-button--success {
  //     background-color: #2c83b1 !important;
  //     border-color: #2c83b1 !important;
  //   }
  // }
  .search-form-container {
    background-color: #fff;
    padding: 10px 10px 0 10px;
    margin-bottom: 10px;
    .el-select {
      width: 180px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .search-input {
      width: 180px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .el-input {
      width: 180px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .el-button--primary {
      background-color: #2c83b1 !important;
      border-color: #2c83b1 !important;
      margin-bottom: 10px;
    }
  }
}
</style>
